import React, { useState } from 'react';
import SliderCaptcha from '../login/SliderCaptcha';
import './login/SliderCaptcha.css';

const TestCaptcha: React.FC = () => {
  const [showCaptcha, setShowCaptcha] = useState(false);
  const [testResults, setTestResults] = useState<Array<{ success: boolean; timestamp: Date }>>([]);

  const handleCaptchaSuccess = () => {
    console.log('验证成功！');
    setTestResults(prev => [...prev, { success: true, timestamp: new Date() }]);
    setShowCaptcha(false);
  };

  const handleCaptchaFail = () => {
    console.log('验证失败！');
    setTestResults(prev => [...prev, { success: false, timestamp: new Date() }]);
  };

  const successCount = testResults.filter(r => r.success).length;
  const failCount = testResults.filter(r => !r.success).length;
  const totalCount = testResults.length;

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>滑动验证组件测试</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={() => setShowCaptcha(true)}
          style={{
            padding: '10px 20px',
            fontSize: '16px',
            backgroundColor: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '6px',
            cursor: 'pointer'
          }}
        >
          开始测试验证
        </button>
      </div>

      <div style={{ marginBottom: '20px' }}>
        <h3>测试统计</h3>
        <p>总测试次数: {totalCount}</p>
        <p>成功次数: <span style={{ color: 'green' }}>{successCount}</span></p>
        <p>失败次数: <span style={{ color: 'red' }}>{failCount}</span></p>
        <p>成功率: {totalCount > 0 ? Math.round((successCount / totalCount) * 100) : 0}%</p>
      </div>

      {testResults.length > 0 && (
        <div style={{ marginBottom: '20px' }}>
          <h3>测试历史</h3>
          <div style={{ maxHeight: '200px', overflowY: 'auto', border: '1px solid #ddd', padding: '10px' }}>
            {testResults.map((result, index) => (
              <div key={index} style={{ 
                marginBottom: '5px',
                color: result.success ? 'green' : 'red'
              }}>
                {index + 1}. {result.success ? '成功' : '失败'} - {result.timestamp.toLocaleTimeString()}
              </div>
            ))}
          </div>
        </div>
      )}

      <div style={{ marginBottom: '20px' }}>
        <h3>使用说明</h3>
        <ol>
          <li>点击"开始测试验证"按钮</li>
          <li>在弹出的验证窗口中，拖动拼图块或滑块</li>
          <li>将拼图块拖到虚线框内（目标位置）</li>
          <li>观察底部的调试信息，了解当前位置和目标位置</li>
          <li>容错范围为 ±15px</li>
        </ol>
      </div>

      {/* 滑动验证组件 */}
      {showCaptcha && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100vw',
          height: '100vh',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 1000
        }}>
          <div style={{
            background: 'white',
            borderRadius: '8px',
            padding: '20px',
            maxWidth: '400px',
            width: '90vw'
          }}>
            <SliderCaptcha
              onVerify={(success) => {
                if (success) {
                  handleCaptchaSuccess();
                } else {
                  handleCaptchaFail();
                }
              }}
            />
            <div style={{ textAlign: 'center', marginTop: '10px' }}>
              <button 
                onClick={() => setShowCaptcha(false)}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#f5f5f5',
                  border: '1px solid #d9d9d9',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                关闭
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default TestCaptcha; 